<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div style="margin-top: 10px">
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-zoom-in" @click="analyze">评价分析
        </el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="loading"
      :data="data"
      size="small"
      style="width: 100%;"
      stripe
      empty-text="暂无数据"
      highlight-current-row
      current-row-key="id"
      @select="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column prop="cid" label="课程编号"/>
      <el-table-column prop="courseName" label="课程名称"/>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="comment(scope.row)">查看学生评价
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <e-form ref="form" @close="load"></e-form>
    <!--分页组件-->
    <el-row>
      <el-col :offset="10">
        <el-pagination
          :total="total"
          :current-page="params.offset"
          style="margin-top: 8px;"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"/>
      </el-col>
    </el-row>
    <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" :before-close="handleClose"
               title="评价分析" width="80%">
      <div class="app-container">
        <el-row>
          <el-col :span="12">
            <pie-chart ref="pieChart"></pie-chart>
          </el-col>
          <el-col :span="12">
            <Pie ref="pie"></Pie>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import comment from '@/api/teacher/comment/comment'
  import courseComment from '@/api/student/comment/courseComment'
  import eForm from './form'
  import count from '@/api/common/count'
  import PieChart from './PieChart'
  import Pie from './Pie'

  export default {
    components: {
      PieChart,
      Pie,
      eForm
    },
    data() {
      return {
        dialog: false,
        loading: true,
        total: 0,
        show: false,
        isAdd: false,
        cid: null,
        commentId: null,
        val: null,
        params: {
          offset: 1,
          limit: 10,
          cid: null,
          tcId: null,
        },
        data: null
      }
    },
    created() {
      this.params.commentId = this.$route.query.commentId.id
      this.load()
    },
    methods: {
      load() {
        comment.findTeacher(this.params).then(res => {
          this.data = res.records
          this.loading = false
          this.currentPage = res.current
          this.total = res.realTotal
        }).catch(error => {
          this.loading = false
        })
      },
      analyze() {
        this.dialog = true
        count.countCommentByCourse({cid: this.cid, commentId: this.commentId}).then(res => {
          this.$refs.pieChart.data = res[0]
          this.$refs.pieChart.initChart()
          this.$refs.pie.data = res[1];
          this.$refs.pie.initChart();
        })
      },
      sizeChange(val) {
        this.params.limit = val
        this.load()
      },
      pageChange(val) {
        this.params.offset = val
        this.load()
      },
      add() {
        this.isAdd = true
        this.$refs.form.dialog = true
      },
      comment(val) {
        this.$router.push({
          path: "studentList", query: {
            "commentId": val.id,
            "cid": val.tcid
          }
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.dialog = false
            done();
          })
          .catch(_ => {
          });
      },
      edit(data) {
        this.isAdd = false
        const _this = this.$refs.form
        _this.form = {
          id: data.id,
          classname: data.classname,
          collegeId: data.collegeId,
          specialtyId: data.specialtyId,
          gradeId: data.gradeId
        }
        _this.dialog = true
      },
      toQuery() {
        this.load()
      },
      selectCollege(val) {
      },

      handleSelectionChange(val, row) {
        if (val.length == 0) {
          this.cid = null
          this.commentId = null
        } else if (val.length > 1) {
          this.$refs.table.clearSelection()
          this.$refs.table.toggleRowSelection(row)
          val.splice(0, val.length - 1)
          this.cid = val[0].tcid
          this.commentId = val[0].id
          this.val = val
        } else {
          this.cid = val[0].tcid
          this.commentId = val[0].id
          this.val = val
        }
      }
    }
  }
</script>

<style scoped>
  .status {
    color: green;
  }
</style>
